<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>游戏图标和音效资源</title>
    <style>
      body {
        font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        margin: 20px;
        line-height: 1.6;
      }
      .resource-section {
        margin-bottom: 50px;
      }
      .image-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 30px;
      }
      .image-item {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      h2 {
        color: #3c4651;
        margin-top: 40px;
        border-bottom: 1px solid #e8e8e8;
        padding-bottom: 10px;
      }
      h3 {
        margin: 10px 0;
        font-size: 16px;
      }
      img {
        width: 80px;
        height: 80px;
        object-fit: contain;
        background-color: #f5f5f5;
        border-radius: 16px;
        padding: 10px;
        box-shadow: 0 4px 10px rgba(60, 70, 81, 0.1);
      }
      .link {
        margin-top: 5px;
        font-size: 12px;
        max-width: 200px;
        word-break: break-all;
      }
      code {
        background-color: #f5f5f5;
        padding: 2px 5px;
        border-radius: 3px;
        font-size: 12px;
      }
      .sound-item {
        background-color: #f5f5f5;
        padding: 15px;
        border-radius: 10px;
        margin-bottom: 15px;
      }
      .instruction {
        background-color: #e8f4ff;
        padding: 15px;
        border-radius: 5px;
        margin: 20px 0;
      }
    </style>
  </head>
  <body>
    <h1>解压一刻应用 - 素材资源</h1>

    <div class="instruction">
      <p>请将以下图片和音频资源下载并保存到相应的目录中：</p>
      <ul>
        <li>游戏图标：保存到 <code>assets/</code> 目录下</li>
        <li>音效文件：保存到 <code>assets/sounds/</code> 目录下</li>
      </ul>
    </div>

    <div class="resource-section">
      <h2>游戏图标</h2>

      <div class="image-container">
        <div class="image-item">
          <img
            src="https://cdn.pixabay.com/photo/2016/08/26/15/54/icon-1622836_1280.png"
            alt="像素小鸟"
          />
          <h3>像素小鸟</h3>
          <div class="link">
            <p>保存为: <code>flappy-icon.png</code></p>
            <code
              >https://cdn.pixabay.com/photo/2016/08/26/15/54/icon-1622836_1280.png</code
            >
          </div>
        </div>

        <div class="image-item">
          <img
            src="https://cdn.pixabay.com/photo/2013/07/12/18/16/knife-153139_1280.png"
            alt="飞刀结界"
          />
          <h3>飞刀结界</h3>
          <div class="link">
            <p>保存为: <code>knife-icon.png</code></p>
            <code
              >https://cdn.pixabay.com/photo/2013/07/12/18/16/knife-153139_1280.png</code
            >
          </div>
        </div>

        <div class="image-item">
          <img
            src="https://cdn.pixabay.com/photo/2014/04/03/11/51/bubble-312449_1280.png"
            alt="拟物泡泡纸"
          />
          <h3>拟物泡泡纸</h3>
          <div class="link">
            <p>保存为: <code>bubble-icon.png</code></p>
            <code
              >https://cdn.pixabay.com/photo/2014/04/03/11/51/bubble-312449_1280.png</code
            >
          </div>
        </div>

        <div class="image-item">
          <img
            src="https://cdn.pixabay.com/photo/2017/01/31/15/32/beach-2024596_1280.png"
            alt="动态沙画板"
          />
          <h3>动态沙画板</h3>
          <div class="link">
            <p>保存为: <code>sand-icon.png</code></p>
            <code
              >https://cdn.pixabay.com/photo/2017/01/31/15/32/beach-2024596_1280.png</code
            >
          </div>
        </div>
      </div>
    </div>

    <div class="resource-section">
      <h2>环境音效资源</h2>
      <p>
        以下是应用中使用的环境音效资源，请将它们下载并保存到
        <code>assets/sounds/</code> 目录中：
      </p>

      <div class="sound-item">
        <h3>雨声 (rain.mp3)</h3>
        <p>
          链接：<a
            href="https://freesound.org/people/ivolipa/sounds/337100/"
            target="_blank"
            >https://freesound.org/people/ivolipa/sounds/337100/</a
          >
        </p>
      </div>

      <div class="sound-item">
        <h3>森林 (forest.mp3)</h3>
        <p>
          链接：<a
            href="https://freesound.org/people/YleArkisto/sounds/331950/"
            target="_blank"
            >https://freesound.org/people/YleArkisto/sounds/331950/</a
          >
        </p>
      </div>

      <div class="sound-item">
        <h3>篝火 (fire.mp3)</h3>
        <p>
          链接：<a
            href="https://freesound.org/people/InspectorJ/sounds/350303/"
            target="_blank"
            >https://freesound.org/people/InspectorJ/sounds/350303/</a
          >
        </p>
      </div>

      <div class="sound-item">
        <h3>海洋 (ocean.mp3)</h3>
        <p>
          链接：<a
            href="https://freesound.org/people/dheming/sounds/197562/"
            target="_blank"
            >https://freesound.org/people/dheming/sounds/197562/</a
          >
        </p>
      </div>
    </div>
  </body>
</html>
